<template>
  <div style="width: 110%; height: 110%">
    <div id="bubble" style="width: 100%; height: 100%"></div>
  </div>
</template>

<script>
import * as $chart from "echarts";
export default {
  data() {
    return {
      chartInstance: {},
    };
  },
  methods: {
    // 入参说明:
    // 1. data 原始气泡数据，是一个对象数组，形如[{name: '可乐', amount: 49}]
    // 2. format 数组依次指定气泡中展示的名称以及影响气泡大小的数据值, 形如['name', 'amount']
    // 3. dom 气泡图绘制所需要的dom id名
    initBubbleChart(data = [], format = [], dom) {
      let [maxValue, temp] = [0, []];
      data.forEach((item) => {
        temp.push(item[format[1]]);
      });
      maxValue = Math.max.apply(null, temp);

      // 气泡颜色数组
      let color = [
        " rgba(255,53,53,0.2)",
        " rgba(255,53,53,0.2)",
        " rgba(255,53,53,0.2)",
        "rgba(102,255,255,0.3)",
      ];
      // 气泡颜色备份
      let bakeColor = [...color];
      // 气泡数据
      let bubbleData = [];
      // 气泡基础大小
      let basicSize = 30;
      // 节点之间的斥力因子,值越大,气泡间距越大
      let repulsion = 2000;
      // 根据气泡数量配置基础大小和斥力因子（以实际情况进行适当调整，使气泡合理分布）
      if (data.length >= 5 && data.length < 10) {
        basicSize = 50;
        repulsion = 120;
      }
      if (data.length >= 10 && data.length < 20) {
        basicSize = 40;
        repulsion = 100;
      } else if (data.length >= 20) {
        basicSize = 30;
        repulsion = 75;
      }

      // 填充气泡数据数组bubbleData
      for (let item of data) {
        // 确保气泡数据条数少于或等于气泡颜色数组大小时，气泡颜色不重复
        if (!bakeColor.length) bakeColor = [...color];
        let colorSet = new Set(bakeColor);
        let curIndex = Math.round(Math.random() * (colorSet.size - 1));
        let curColor = bakeColor[curIndex];
        colorSet.delete(curColor);
        bakeColor = [...colorSet];
        // 气泡大小设置
        let size = (item[format[1]] * basicSize * 2.5) / maxValue;
        if (size < basicSize) size = basicSize;

        bubbleData.push({
          name: item[format[0]] + "\n" + "\n" + item[format[1]],
          value: item[format[1]],
          x: item[format[2]],
          y: item[format[3]],
          symbolSize: size,
          draggable: true,
          itemStyle: {
            color: curColor,
          },
          label: {
            fontSize: 18,
          },
        });
      }

      let bubbleId = document.getElementById(dom);
      this.chartInstance = $chart.init(bubbleId);
      let bubbleOptions = {
        backgroundColor: "rgba(255, 255, 255, 0)",
        animationEasingUpdate: "bounceIn",
        series: [
          {
            type: "graph",

            label: {
              show: true,
            },
            data: bubbleData,
          },
        ],
      };
      this.chartInstance.setOption(bubbleOptions);
    },
  },
  mounted() {
    let data = [
      {
        name: "打印刻录",
        value: 100,
        x: 190,
        y: 170,
      },

      {
        name: "违规动作",
        value: 100,
        x: 120,
        y: 100,
      },
      {
        name: "身份鉴别",
        value: 60,
        x: 180,
        y: 80,
      },
      {
        name: "异常行为",
        value: 80,
        x: 80,
        y: 190,
      },
      {
        name: "主机审计",
        value: 67,
        x: 140,
        y: 210,
      },
    ];
    this.initBubbleChart(data, ["name", "value", "x", "y"], "bubble");
    // 添加随页面变化而变化
    window.addEventListener("resize", () => {
      this.chartInstance.resize();
    });
  },
   destroyed () {
    window.removeEventListener("resize", () => {
      this.chartInstance.resize();
    });
  },
};
</script>

<style lang="scss" scoped>
</style>
